import { messages, queryCurrencyPrecision } from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Popover } from 'antd'
import moment from 'moment'
import ExportModal from 'components/template/export-modal/export-modal';
import AdvancedTable from 'components/advanced-table'
import ViewHistoryService from './view-history.service'
import selectorData from "share/selectorData"

class ViewHistory extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sort: '',
      searchParams: {}
    }
  }

  columns = [
    {
      title: messages('common.document.name')/*单据名称*/,
      dataIndex: 'formName',
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('request-4.key593')/*单据编号*/,
      dataIndex: 'businessCode',
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('common.applicant')/*申请人*/,
      dataIndex: 'applicantName',
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('request-4.key594')/*员工工号*/,
      dataIndex: 'applicantEmployeeID',
      hide: true,
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('common.user.company')/*员工公司*/,
      dataIndex: 'applicantCompanyName',
      hide: true,
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('request-4.key595')/*员工部门*/,
      dataIndex: 'applicantDepartmentName',
      hide: true,
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('request-4.key596')/*员工部门路径*/,
      dataIndex: 'applicantDepartmentPath',
      hide: true,
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('request-4.key597')/*提交人*/,
      dataIndex: 'submittedName',
      hide: true,
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('common.document.name')/*单据名称*/,
      dataIndex: 'formName',
      hide: true,
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('common.currency')/*币种*/,
      dataIndex: 'currencyCode',
      hide: true,
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('common.amount')/*金额*/,
      dataIndex: 'amount',
      hide: true,
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('request-4.key56')/*创建时间*/,
      dataIndex: 'createdDate',
      hide: true,
      render: (date, record) => date ? moment(date).format('YYYY-MM-DD HH:mm:ss') : moment(record.createDate).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: messages('request-4.key598')/*操作人*/,
      dataIndex: 'operatorName',
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('request-4.key599')/*操作时间*/,
      dataIndex: 'operateDate',
      render: (date, record) => date ? moment(date).format('YYYY-MM-DD HH:mm:ss') : moment(record.createDate).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: messages('request-4.key600')/*操作节点*/, dataIndex: 'nodeType',
      render: (value, record) => {
        return this.getNodeTypeName(value)
      }
    },
    {
      title: messages('request-4.key601')/*操作类型*/,
      dataIndex: 'operationName',
      render: value => <Popover content={value}>{value}</Popover>
    },
    {
      title: messages('request-4.key602')/*操作意见*/,
      dataIndex: 'operationDetail',
      render: value => <Popover content={value}>{value}</Popover>
    }
  ];

  searchForm = [
    {
      id: 'formType', label: messages('request-4.key603')/*表单类型*/, dataIndex: 'formType',
      component: 'MultiSelectorV2',
      props: {
        type: 'historyFormTypeList'
      },
      parser: value => ({
        formTypeIds: value ? value.map(item => Number(item.formTypeId)) : null
      })
    },
    {
      id: 'applicantOIDs', label: messages('common.applicant')/*申请人*/, component: 'Selector',
        props: {
          placeholder: messages('common.please.input')/*请输入*/ + messages('common.applicant')/*申请人*/,
          selectorItem: {
            ...selectorData['user'],
            url: `/api/users/v3/search?page=0&size=9999&roleType=TENANT&status=all`,
            label: record => (`${record.employeeID}-${record.fullName}${(record.status !== 1001 ?
              (`（${record.status === 1002 ?
                messages('request-1.key793')/*待离职员工*/ :
                messages('request-1.key794')/*离职员工*/}）`
              ) :
              ''
            )}`)
          }
        },
        parser: value => ({
          applicantOIDs: value ? [value] : null
        }),
        JSONObjectFormatterParams: ['fullName', 'userOID']
    },
    {
      id: 'dateRange', label: messages('request-4.key604')/*创建日期*/, component: 'DateRangePicker',
      parser: value => ({
        createStartDate: value && value[0] ? moment(value[0]).format('YYYY-MM-DD') : null,
        createEndDate: value && value[1] ? moment(value[1]).format('YYYY-MM-DD') : null
      })
    },
    {
      id: 'operationDateRange', label: messages('request-4.key605')/*操作日期*/, component: 'DateRangePicker',
      initialValue: [moment().subtract(1, 'week'), moment()],
      parser: value => ({
        operationStartDate: value && value[0] ? moment(value[0]).format('YYYY-MM-DD') : null,
        operationEndDate: value && value[1] ? moment(value[1]).format('YYYY-MM-DD') : null
      })
    },
    {
      id: 'operatorOIDs', label: messages('request-4.key598')/*操作人*/, component: 'Selector',
      props: {
        placeholder: messages('common.please.input')/*请输入*/ + messages('request-4.key598')/*操作人*/,
        selectorItem: {
          ...selectorData['user'],
          url: `/api/users/v3/search?page=0&size=9999&roleType=TENANT&status=all`,
          label: record => (`${record.employeeID}-${record.fullName}${(record.status !== 1001 ?
            (`（${record.status === 1002 ?
              messages('request-1.key793')/*待离职员工*/ :
              messages('request-1.key794')/*离职员工*/}）`
            ) :
            ''
          )}`)
        }
      },
      parser: value => ({
        operatorOIDs: value ? [value] : null
      }),
      JSONObjectFormatterParams: ['fullName', 'userOID']
    },
    {
      component: 'MultiSelectorV2',
      id: 'operations',
      label: messages('request-4.key601')/*操作类型*/,
      props: {
        type: 'operation',
      },
      parser: value => ({
        operations: value ? value.map(item => item.operation) : null
      }),
      JSONObjectFormatterParams: ['operationName', 'operation']
    }
  ];

  getNodeTypeName = nodeType => {
    let nodeTypeMap = {
      1001: messages('request-4.key150')/*审批*/,
      1012: messages('request-4.key152')/*审核*/,
    }
    return nodeTypeMap[nodeType] || '-'
  };

  service = (page, pageSize, searchParams) => {
    this.setState({ searchParams });
    return ViewHistoryService.getViewHistoryList(page, pageSize, searchParams)
  };

  render() {
    const { searchParams } = this.state;
    return (
      <div className="full-height-page">
        <AdvancedTable
          service={this.service}
          title={messages('request-4.key606')/*审批历史查询*/}
          waterMark
          index
          rowKey={(record,index) => record.entityOID + record.approverOID +index}
          tableName='view-history'
          columns={this.columns}
          onRef={ref => this.advancedTableRef = ref}
          searchForm={this.searchForm}
          footer={
            <ExportModal
              type={"btn"}
              btnType="primary"
              exportTitle={messages('request-4.key607')/*导出搜索数据*/}
              exportType="APPROVAL_HISTORY_EXPORT"
              exportCondition={{
                approvalHistorySearchParamDTO: searchParams
              }}
              exportCommand={'APPROVAL_HISTORY_EXPORT'}
            />
          }
        />
      </div>
    )
  }
}

ViewHistory.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    company: state.login.company,
    user: state.login.user
  }
}

export default connect(mapStateToProps)(ViewHistory);
